<template>
	<view>
		<uni-list :border="true" >
			<uni-list-chat v-for="(item , index) in chatList.listInfo" :key="item.senderInfo.senderId" :avatar-circle="true" :title="item.senderInfo.senderName" :avatar="item.senderInfo.senderImg" :note="item.sendNum !=='' ? '存在未读消息' : ''" :time="item.sendTime" :badge-text="item.sendNum" :clickable="true"  @click="clickChatItem(item.senderInfo, index)"></uni-list-chat>
		</uni-list>
		<view class="to-delete"  @click="toDelChatInfo">
			<!-- 使用uni-ui图标 -->
			<image :src="chatList.deleFlag ? '../../static/chat/cancel.png' : '../../static/chat/delete.png'"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import chatStore from '../../store/chat'	
import { InitChatListInfo, SenderInfoType } from "../../type/chat";
import { onShow ,onPullDownRefresh} from '@dcloudio/uni-app';
const chatList=reactive({
	listInfo:new Array<InitChatListInfo>(),
	//删除状态判定 
	deleFlag:false,
});
//对聊天列表进行赋值
const setChatList=()=>{
	chatList.listInfo = [];
	chatStore.senderList.forEach((item)=>{
		   var chatInfo=new InitChatListInfo();
		   chatInfo.senderInfo=item;
		   var sendNum=uni.getStorageSync('unRead'+item.senderId);
		   chatInfo.sendNum=sendNum ? sendNum : '';
		   var sendTime=uni.getStorageSync('sendTime'+item.senderId);
		   chatInfo.sendTime=sendTime;
		   chatList.listInfo.push(chatInfo);
	})
}
onShow(()=>{
   setChatList();
})
//下拉刷新
onPullDownRefresh(() => {
	//重新获取消息列表
	setChatList();
	//停止刷新
	uni.stopPullDownRefresh();
});
const clickChatItem=(senderInfo : SenderInfoType,index :number)=>{
	//删除消息列表
	if(chatList.deleFlag){
	//删除缓存消息
	chatStore.delSender(senderInfo.senderId);
	uni.removeStorageSync('unRead'+senderInfo.senderId);
	uni.removeStorageSync('sendTime'+senderInfo.senderId);
	//删除chatList消息
	chatList.listInfo.splice(index,1);
	}else{
		//进入聊天页面
	  chatList.listInfo[index].sendNum='';
	  uni.navigateTo({
		url:'/pages/chatRoom/chatRoom?chatterId='+senderInfo.senderId+'&chatterName='+ senderInfo.senderName+'&chatterImg='+senderInfo.senderImg
	  })	
	}
}
const toDelChatInfo=()=>{
	chatList.deleFlag=chatList.deleFlag ? false : true;
	if(chatList.deleFlag){
	 uni.showToast({
	 	title: '点击要删除的列表•̀ ω •́ ',
	 	icon: "none"
	 });	
	}
}
</script>

<style lang="scss" scoped>
	.to-delete {
		height: 80rpx;
		width: 80rpx;
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
		text-align: center;
		line-height: 80rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
</style>
